<script setup>
import ImageUpload from "@/common/ImageUpload.vue";
import {ref, onMounted} from "vue";
import {ElMessage} from "element-plus";
import {addTheme, getProducts, getThemeById, updateTheme} from "@/api/theme.js";

//有id是编辑，没有id是添加
const {id} = defineProps({
  id: {
    type: Number,
    default: undefined
  },
})

const productList = ref([])

onMounted(async () => {
  const {data} = await getProducts()
  productList.value = data
  if (id !== undefined) {
    await getInfo(id)
  }
})

//获取主题信息
const getInfo = async (id) => {
  const {code, data, msg} = await getThemeById(id);
  if (code !== 200) {
    ElMessage.error(msg)
    window.location.reload();
    return
  }
  form.value = data
  productList.value = [...productList.value, ...data.productsModels]
}

//表单
const form = ref({
  id: undefined,
  title: undefined,
  subtitle: undefined,
  description: undefined,
  image: undefined,
  bannerImage: undefined,
  sortOrder: 1,
  productIds: [],
  status: 1
})
//提交表单
const onSubmit = async () => {
  if (id === undefined) {
    await add()
  } else {
    await edit(id)
  }
}
const emit = defineEmits(['success'])
//添加主题
const add = async () => {
  const {code, msg} = await addTheme(form.value);
  if (code !== 200) {
    ElMessage.error(msg)
    return
  }
  ElMessage.success(msg)
  emit('success')
}
//修改主题
const edit = async () => {
  const {code, msg} = await updateTheme(form.value);
  if (code !== 200) {
    ElMessage.error(msg)
    return
  }
  ElMessage.success(msg)
  emit('success')
}

const remoteMethod = (query) => {
  let timer = null;

  // 防抖，避免高频搜索
  function debounce() {
    if (timer) {
      clearTimeout(timer)
    }
    timer = setTimeout(() => {
      getProducts(query).then(res => {
        productList.value = res.data
      })
    }, 50)
  }

  debounce()
}
</script>


<template>
  <el-form label-width="100px">
    <el-form-item required label="主题标题">
      <el-input v-model="form.title"></el-input>
    </el-form-item>
    <el-form-item required label="主题副标题">
      <el-input v-model="form.subtitle"></el-input>
    </el-form-item>
    <el-form-item required label="主题描述">
      <el-input type="textarea" :rows="5" v-model="form.description"></el-input>
    </el-form-item>
    <!--添加多个产品-->
    <el-form-item required label="主题产品">
      <el-select v-model="form.productIds" multiple filterable remote
                 :remote-method="remoteMethod"
                 placeholder="请选择">
        <el-option v-for="item in productList" :key="item.id" :label="item.name" :value="item.id">
        </el-option>
      </el-select>
    </el-form-item>
    <el-form-item required label="主题封面图">
      <image-upload v-model:url="form.image"/>
    </el-form-item>
    <el-form-item required label="主题横幅图">
      <image-upload v-model:url="form.bannerImage"/>
    </el-form-item>
    <el-form-item required label="排序">
      <el-input-number v-model="form.sortOrder" :min="0" :max="1000"></el-input-number>
    </el-form-item>
    <el-form-item required label="显示状态">
      <el-switch :active-value="1" :inactive-value="0" v-model="form.status"></el-switch>
    </el-form-item>
  </el-form>
  <div style="text-align: right; margin-top: 20px">
    <el-button type="primary" @click="onSubmit">提交</el-button>
  </div>

</template>

<style scoped lang="scss">

</style>
